<template>
	<div class="main_box">		
		<div class="main_head">
			<img class="user_bg" src="../../../static/images/47/mine_headpic3.jpg"/>
			<img class="user_bg_cover" src="../../../static/images/17/profile_top_cover_bg.png"/>
			<router-link :to="{path:'/login'}"><img src="../../../static/images/4/f-1.png" class="user_back" alt="" /></router-link>
			<router-link :to="{path:'/login'}"><img src="../../../static/images/17/私信-1.png" class="user_msg" alt="" /></router-link>
			<img class="user_icon" src="../../../static/images/17/profile_head_top_bg.png"/>
			<div class="user_intr">曼妙人生</div>
			<div class="user_id">id：<span>03452100</span></div>
			<div class="user_sign">个性签名：<span>人生何时才是尽头，我的春天在何处，是否还有在我身边...</span></div>
			<img class="arrow_unshift" v-if="fans_show" @click="fans_show_hidden" src="../../../static/images/19/箭头下-2.png"/> 
			<div class="star_reply_cont" v-if="fans_hidden">
				<div class="his_reply_tip">
					<h1>23<span>个</span></h1>
					<p>明星回复</p>
				</div>	
				<div class="his_reply">
					<img src="../../../static/images/47/mine_headpic4.jpg"/>
					<p>刘德华</p>
				</div>	
				<div class="his_reply">
					<img src="../../../static/images/47/mine_headpic4.jpg"/>
					<p>刘德华</p>
				</div>
				<div class="his_reply">
					<img src="../../../static/images/47/mine_headpic4.jpg"/>
					<p>刘德华</p>
				</div>	
				
			</div>
			<img class="arrow_shift" v-if="fans_hidden" @click="fans_show_hidden" src="../../../static/images/19/箭头上-2.png"/>
			<div class="main_head_bar">
				<div class="main_head_focus">
					<p>100</p>
					<h1>关注</h1>
				</div>
				<img class="main_head_focus_row" src="../../../static/images/17/内容条分割线-竖线.png" alt="" />
				<div class="main_head_fans">
					<p>1340</p>
					<h1>粉丝</h1>
				</div>
				<img class="main_head_fans_row" src="../../../static/images/17/内容条分割线-竖线.png" alt="" />
				<div class="main_head_focused">
					<h1>已关注</h1>
				</div>
			</div>
		</div>
		
		<div class="user_his_ph">
			
			<p>这家伙真懒，一张图片也没有上传！</p>
		</div>
		
		<div class="fans_cont">
			<div class="fans_icon"><img src="../../../static/images/47/mine_headpic4.jpg"/></div>
			<div class="fans_name">脑残粉</div>
			<div class="fans_time">刚刚</div>
			<div class="fans_address">三里屯SOHO</div>
			<div class="fans_hot"><img src="../../../static/images/11/zan_btn_normal.png"/>506</div>
			<div class="fans_comments">我是偶然一次在电视上看到！</div>
			<div class="fans_comments_img">
				<img src="../../../static/images/47/mine_headpic4.jpg"/>
				<img src="../../../static/images/47/mine_headpic4.jpg"/>
			</div>
		</div>
		
		<div class="fans_cont">
			<div class="fans_icon"><img src="../../../static/images/47/mine_headpic4.jpg"/></div>
			<div class="fans_name">脑残粉</div>
			<div class="fans_time">刚刚</div>
			<div class="fans_address">三里屯SOHO</div>
			<div class="fans_hot"><img src="../../../static/images/11/zan_btn_normal.png"/>506</div>
			<div class="fans_comments">我是偶然一次在电视上看到！</div>
			<div class="fans_comments_img">
				<img src="../../../static/images/47/mine_headpic4.jpg"/>
				<img src="../../../static/images/47/mine_headpic4.jpg"/>
			</div>
		</div>
	</div>
</template>

<script>

	export default {
		name:"main_lazy",
		data(){
			return {
				fans_show:true,
				fans_hidden:false
			}
		},
		methods:{
			fans_show_hidden(event){
				this.fans_show=!this.fans_show,
				this.fans_hidden=!this.fans_hidden
			}
			
		}
	}
</script>

<style scoped lang='less'>
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body { line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
a{color: inherit;text-decoration: none;}
body {background: #f0f2f5;font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;font-size: 25/64rem;color: #444;}

.main_box{
    width: 100%;
    /*display: flex; flex-flow: column;align-items: center;*/
}
.main_head {
	width:100%;
	/*height:auto;*/
	/*background: url("../../../static/images/17/profile_top_cover_bg.png") no-repeat;*/
	display: flex;flex-flow: column;align-items: center;
	position: relative;
	.user_bg{
		width:100%;height:100%;
		position: absolute; top: 0;left:0;
	}
	.user_bg_cover{
		width:100%;height:100%;
		position: absolute; top: 0;left:0;
	}
	.user_back {
		width:21/64rem;height:37/64rem;
	    position: absolute;top: 25/64rem;left: 40/64rem;
	}
	.user_msg {
		width:45/64rem;height:31/64rem;
	    position: absolute;top: 30/64rem;right: 40/64rem;
	}
	.user_icon{
		width:194/64rem;height:194/64rem;
		background:url("../../../static/images/47/mine_headpic3.jpg") no-repeat;
		background-size:194/64rem 194/64rem;
		margin:90/64rem auto 0;z-index: 1;border-radius: 50%;  
	}
	.user_intr{
		margin:12/64rem auto 0; z-index: 1;
	    font-size:30/64rem;color:#ffffff;
	}
	.user_id{
		margin:14/64rem auto 0; z-index: 1;
	    font-size:24/64rem;color:rgba(255,255,255,0.6);
	}
	.user_sign{
		width:493/64rem;
		margin:20/64rem auto 0; z-index: 1;		
	    font-size:26/64rem;color:rgba(255,255,255,0.6);
	}
	.main_head_bar{
		width:100%;height:90/64rem;
		margin:auto auto 0; z-index: 1;	
		text-align: center;
		display: flex; flex-flow: row;align-items: center;  
		.main_head_focus,.main_head_fans{
			width:32%;height:90/64rem;
			color:#fff;
			p{font-size: 32/64rem;height:40/64rem;}
			h1{font-size: 26/64rem;height:35/64rem;}
		}
		.main_head_focused{
			width:33%;height:90/64rem;
			color:rgba(255,255,255,0.6);
			h1{font-size: 30/64rem;line-height: 90/64rem;}
		} 
	}	
	.arrow_unshift{
		width:43/64rem;height:19/64rem;margin:44/64rem auto; z-index: 1;
	}
	.arrow_shift{
		width:43/64rem;height:19/64rem;margin:20/64rem auto; z-index: 1;
	}
	.star_reply_cont{
		display: flex;flex-flow:row;justify-content: flex-start;
		/*position: absolute;top:(15 + 40 + 26)/64rem;*/
		width:600/64rem;z-index: 1;
		margin-left:56/64rem;
		margin-top:34/64rem;
		.his_reply_tip{ 
			margin-right:54/64rem;
			text-align: center;font-size: 26/64rem;
			h1{font-size: 48/64rem;color:#9e9ba3;span{font-size: 26/64rem;}}
			p{width:120/64rem;}
			img{width:60/64rem;height:60/64rem;border-radius: 50%;}
		}
		.his_reply{
			margin: 0 25/64rem;
			text-align: center;font-size: 28/64rem;color:#fff;
			p{width:100/64rem;}
			img{width:60/64rem;height:60/64rem;border-radius: 50%;}
		}
	
	}
}


.user_his_ph{
	/*position: absolute;left:20/64rem;top:(580 + 20)/64rem;*/
	width:600/64rem;height:140/64rem;
	background: url("../../../static/images/17/photo_album_bg.png") no-repeat;
	background-size:100% 100%;
	margin:20/64rem;
	position: relative;
	img{width:110/64rem;height:110/64rem;margin:15/64rem 0 15/64rem 15/64rem;}
	.his_arrow{
		width:19/64rem;height:32/64rem;
		position:absolute;
		right:32/64rem;
		top:(140 - 49)/128rem;
	}
	p{
		line-height:140/64rem;text-align: center;font-size: 26/64rem;color:#959595;
	}
}

.fans_cont{
	width:100%;
	height:350/64rem;
	/*position: absolute;top:(580+20+140+20)/64rem;*/
	margin:0 auto; 
	position:relative;
	.fans_icon{	
		position:absolute;left:20/64rem;top:20/64rem;
		img{
			width:60/64rem;
			height:60/64rem;
			border-radius: 50%;
		}
	}
	.fans_name{
		position:absolute;left:(20+60+20)/64rem;top:20/64rem;
		font-size: 24/64rem;color:#B676EB;
	}
	.fans_time{
		position:absolute;left:(20+60+20)/64rem;top:(20+24+8)/64rem;
		font-size: 24/64rem;color:#959595;
	}
	.fans_address{
		position:absolute;left:(20+60+20+24*2+20)/64rem;top:(20+24+8)/64rem;
		font-size: 24/64rem;color:#959595;
	}
	.fans_comments{
		position:absolute;left:(20+60+20)/64rem;top:(20+24+8+24+28)/64rem;
		font-size: 30/64rem;color:#313131;
	}
	.fans_hot{
		position:absolute;right:40/64rem;top:(20+20)/64rem;
		font-size: 24/64rem;color:#959595;
		img{margin-right:10/64rem;margin-bottom:-5/64rem;}

	}
	.fans_comments_img{
		position:absolute;left:114/64rem;top:(20+24+8+24+28+30+22)/64rem;
		img{width:120/64rem;height:120/64rem;margin-right:18/64rem;margin-bottom:82/64rem;}
	}
}
</style>